.courseHours{
    flex-direction: row;
    display: flex;
        &-title{
            writing-mode: vertical-rl;
            height: 100px;
            border-radius: 0px 5px 5px 0px;
            background-color:#fff;
            margin: 10px 10px;
            box-shadow: 4px 0px 8px 0px rgba(0,0,0,0.2);
            text-align: center;
            font-size: 18px;
            color: black;
        }
        &-cardgroup{
            width:97%;
            display: flex; 
            flex-direction: row;
            flex-wrap:wrap;
                &-card{
                    width: 12%;
                    height: 100px;
                    border-radius: 5px;
                    position: relative;
                    background-color:#b4e9ad;
                    margin: 10px 10px;
                    transition: border-radius 1s;
                    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
                    &:hover {
                        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
                        border-bottom-right-radius: 50px;
                        border-top-left-radius: 50px;
                        border-bottom-left-radius: 10px;
                        border-top-right-radius: 10px;
                    }
                   
                    &-name{
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        font-style: italic;
                        font-size: 18px;
                        color: black;
                        min-width: 110px;
                        text-align: center;
                    }
                }
    }

}



